<template>
    <div id="navs">
        <div class="titles">报修类别完成率</div>
        <div id="midBottom"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'

    import {getReflectType} from "../../../network/home";

    export default {
        name: "midBottom",
        data() {
            return {
                timer:null
            }
        },
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('中下关闭')
            }
        },
        methods: {
            setEchart() {
                getReflectType().then(res => {
                    if (res.code == '200') {
                        // console.log(res.data.dataList)
                        // console.log(res.data.name)

                        let myChart = echarts.init(document.getElementById("midBottom"));
                        myChart.setOption({
                            legend: {
                                x: 'center',
                                y: 'bottom',
                                selectedMode: true,
                                textStyle: {
                                    color: "#00f5ff",
                                    fontSize: 12
                                },
                                data: res.data.name
                            },
                            calculable: true,
                            series: [
                                {
                                    name: '面积模式',
                                    type: 'pie',
                                    radius: [30, 110],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    labelLine: {
                                        lineStyle: {
                                            color: "#00f5ff"
                                        }
                                    },
                                    label: {
                                        color: "#00f5ff",
                                        formatter: '{b}({d}%)'
                                    },
                                    data: res.data.dataList
                                }
                            ]
                        });
                    }
                });
            }

        }
    }
</script>

<style scoped>
    #navs {
        position: relative;
    }

    .titles {
        font-size: 22px;
        color: #E3E30F;
        position: absolute;
        left: 50%;
        top: 5%;
        transform: translate(-50%, -50%);
    }

    #midBottom {
        width: 100%;
        height: 400px;
    }
</style>
